<!DOCTYPE html>
<!-- saved from url=(0079)http://stackoverflow.com/questions/7055393/center-image-using-text-align-center -->
<html><script>var COMSCORE={beacon:function(){},purge:function(){},__noSuchMethod__:function(){}}</script><script>function quantserve(){}</script><script>var urchinTracker=function(){},_gaq={push:function(){try {if(arguments[0][0]=='_link')window.location.href=arguments[0][1]}catch(er){}}},_gat={_createTracker:function(){}, _getTracker:function(){return{__noSuchMethod__:function(){},_link:function(o){if(o)location.href=o;},_linkByPost:function(){return true;},_getLinkerUrl:function(o){return o;},_trackEvent:function(){}}}};</script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>html - Center image using text-align center? - Stack Overflow</title>
    <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
    <link rel="apple-touch-icon image_src" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
    <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="http://stackoverflow.com/opensearch.xml">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:domain" content="stackoverflow.com">
    <meta name="og:type" content="website">
    <meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6">
    <meta name="og:title" content="Center image using text-align center?">
    <meta name="og:description" content="Is the property text-align: center; a good way to center an image using CSS?

img {
    text-align: center;
}

">
    <meta name="og:url" content="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center">
    <link rel="canonical" href="./html - Center image using text-align center  - Stack Overflow_files/html - Center image using text-align center  - Stack Overflow.htm">

    
    
    <script async="" src="http://b.scorecardresearch.com/beacon.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="http://edge.quantserve.com/quant.js"></script><script type="text/javascript" async="" src="http://static.adzerk.net/ados.js"></script><script type="text/javascript" src="./html - Center image using text-align center  - Stack Overflow_files/jquery.min.js"></script>
    <script src="./html - Center image using text-align center  - Stack Overflow_files/stub.en.js" type="text/javascript"></script><style type="text/css"></style><style class="fe29764192e7cc484671d21c3d030a8">object[type$="x-shockwave-flash"]:not([classid]),object[type$="futuresplash"]:not([classid]),embed[type$="x-shockwave-flash"],embed[type$="futuresplash"]{display:none !important}</style>
    <link rel="stylesheet" type="text/css" href="./html - Center image using text-align center  - Stack Overflow_files/all.css">
    
    <link rel="alternate" type="application/atom+xml" title="Feed for question &#39;Center image using text-align center?&#39;" href="http://stackoverflow.com/feeds/question/7055393">
    <script type="text/javascript">
        
        StackExchange.ready(function () {
            StackExchange.using("postValidation", function () {
                StackExchange.postValidation.initOnBlurAndSubmit($('#post-form'), 2, 'answer');
            });

            
            StackExchange.question.init({showAnswerHelp:true,totalCommentCount:0,shownCommentCount:0,highlightColor:'#F4A83D',backgroundColor:'#FFF',questionId:7055393});

            styleCode();

                StackExchange.realtime.subscribeToQuestion('1', '7055393');
            
                    });
    </script>


    <script type="text/javascript">
        StackExchange.init({"locale":"en","stackAuthUrl":"https://stackauth.com","serverTime":1386526423,"styleCode":true,"enableUserHovercards":true,"site":{"name":"Stack Overflow","description":"Q&A for professional and enthusiast programmers","isNoticesTabEnabled":true,"recaptchaPublicKey":"6LdchgIAAAAAAJwGpIzRQSOFaO0pU6s44Xt8aTwc","enableSocialMediaInSharePopup":true},"user":{"fkey":"8ba693d5576fed9c6ca897c79524a525","isAnonymous":true}});
        StackExchange.using.setCacheBreakers({"js/prettify-full.en.js":"e0bbd4760e83","js/moderator.en.js":"1a411fd265fe","js/full-anon.en.js":"b4c15f011723","js/full.en.js":"562f537a615f","js/wmd.en.js":"bd9234d44a40","js/third-party/jquery.autocomplete.min.js":"e5f01e97f7c3","js/third-party/jquery.autocomplete.min.en.js":"","js/mobile.en.js":"d1d834ef85d2","js/help.en.js":"d3cc74d8a93a","js/tageditor.en.js":"6d51a5f8d7f3","js/tageditornew.en.js":"111b781cf314","js/inline-tag-editing.en.js":"f951bd09dc69","js/revisions.en.js":"33fd38144303","js/review.en.js":"b44cee8b2b0b","js/tagsuggestions.en.js":"e4e7b952fcc7","js/post-validation.en.js":"c275fe37d674","js/explore-qlist.en.js":"73825bd006fc","js/events.en.js":"d92fbd81d9fd"});
        StackExchange.using("gps", function() {
             StackExchange.gps.init(true);
        });
        
    </script>
    
        <script type="text/javascript">
            StackExchange.ready(function () {
                $('#nav-tour').click(function () {
                    StackExchange.using("gps", function() {
                        StackExchange.gps.track("aboutpage.click", { aboutclick_location: "headermain" }, true);
                    });
                });
            });
        </script>
<script async="" type="text/javascript" src="./html - Center image using text-align center  - Stack Overflow_files/full-anon.en.js"></script><style>#qtjsabwsopqfradegzxhiaiobpwnovgqfr{border:solid 2px #fff !important;box-sizing:content-box !important;color:#fff !important;display:block !important;height:auto !important;margin:0 !important;opacity:0.9 !important;padding:7px 10px !important;position:fixed !important;visibility:visible !important;width:auto !important;z-index:2147483647 !important;-webkit-border-radius:5px !important;-webkit-box-shadow:0px 0px 20px #000 !important;-webkit-box-sizing:content-box !important;}.qtjsabwsopqfradegzxhiaiobpwnovgqfr-blocked{color:#777 !important;display:inline !important;text-decoration:line-through !important;}#qtjsabwsopqfradegzxhiaiobpwnovgqfr br{display:block !important;}#qtjsabwsopqfradegzxhiaiobpwnovgqfr span{background:transparent !important;}#qtjsabwsopqfradegzxhiaiobpwnovgqfr div{border:0 !important;margin:0 !important;padding:0 !important;width:auto !important;letter-spacing:normal !important;font:13px Arial,Helvetica !important;text-align:left !important;text-shadow:none !important;text-transform:none !important;word-spacing:normal !important;}#qtjsabwsopqfradegzxhiaiobpwnovgqfr a{font-weight:normal !important;background:none !important;text-decoration:underline !important;color:#fff !important;}@media print{#qtjsabwsopqfradegzxhiaiobpwnovgqfr{display:none !important;}}</style><script async="" type="text/javascript" src="./html - Center image using text-align center  - Stack Overflow_files/post-validation.en.js"></script><script async="" type="text/javascript" src="./html - Center image using text-align center  - Stack Overflow_files/prettify-full.en.js"></script><script>window["_GOOG_TRANS_EXT_VER"] = "1";</script><link href="./html - Center image using text-align center  - Stack Overflow_files/sidebar.min.css" type="text/css" rel="stylesheet"></head>
<body class="question-page new-topbar" cz-shortcut-listen="true" style="">
    <noscript>&lt;div id="noscript-padding"&gt;&lt;/div&gt;</noscript>
    <div id="notify-container"></div>
    <div id="overlay-header"></div>
    <div id="custom-header"></div>
<div class="topbar">
    <div class="topbar-wrapper">
        
        <div class="js-topbar-dialog-corral">

<div class="topbar-dialog siteSwitcher-dialog dno">
    <div class="header">
        <h3><a href="http://stackexchange.com/sites">Explore our sites</a></h3>
    </div>
    <div class="modal-content">
        <ul class="current-site">
                <li>
                        <a href="http://stackoverflow.com/" class="current-site-link site-link js-site-link js-gps-track">
        <div class="site-icon favicon favicon-stackoverflow" title="Stack Overflow"></div>
        Stack Overflow
    </a>
    <div class="related-links js-related-links">
            <a href="http://chat.stackoverflow.com/">chat</a>
                    <a href="http://blog.stackexchange.com/">blog</a>
            </div>

                </li>
                <li class="related-site">
                        <a href="http://meta.stackoverflow.com/" class="site-link js-site-link js-gps-track" data-gps-track="site.switch({ target_site:4, item_type:3 })">
        <div class="site-icon favicon favicon-stackoverflowmeta" title="Meta Stack Overflow"></div>
        Meta Stack Overflow
    </a>

                    
                </li>
                            <li class="related-site">
                    <a class="site-link js-site-link" href="http://careers.stackoverflow.com/">
                        <div class="site-icon favicon favicon-careers" title="Stack Overflow Careers"></div>
                        Careers 2.0
                    </a>
                </li>
        </ul>
        


        
            <div class="child-content"></div>

    </div>
</div>        </div>

        <div class="network-items">
            
            <a href="http://stackexchange.com/" class="topbar-icon icon-site-switcher js-site-switcher-button js-gps-track" data-gps-track="site_switcher.show" data-child-content-url="/topbar/site-switcher/site-list" data-on-class="icon-site-switcher-on" title="A list of all 112 Stack Exchange sites">
                <span class="hidden-text">Stack Exchange</span>
            </a>
            
        </div>

        <div class="topbar-links">
            
                <div class="links-container">
                    <span class="topbar-menu-links">
                        <a href="http://stackoverflow.com/users/login?returnurl=%2fquestions%2f7055393%2fcenter-image-using-text-align-center" class="login-link">sign up</a>
                        <a href="http://stackoverflow.com/users/login?returnurl=%2fquestions%2f7055393%2fcenter-image-using-text-align-center" class="login-link">log in</a>
                        <a href="http://stackoverflow.com/tour">tour</a>
                        <a href="http://stackoverflow.com/help">help</a>
                    </span>
                </div>

			<div class="search-container">
                <form id="search" action="http://stackoverflow.com/search" method="get" autocomplete="off">
                    <input name="q" type="text" placeholder="search" value="" tabindex="1" autocomplete="off" maxlength="240">
                </form>
			</div>
            	
        </div>      
    </div> 
</div>
<script>
    StackExchange.ready(function () {
        //topbar.init();
        StackExchange.topbar.init();
    });
</script>    <div class="container">
        <div id="header" class="headeranon">
            <br class="cbt">
            <div id="hlogo">
                <a href="http://stackoverflow.com/">
                    Stack Overflow
                </a>
            </div>
            <div id="hmenus">
                <div class="nav mainnavs mainnavsanon">
                    <ul>
                            <li class="youarehere"><a id="nav-questions" href="http://stackoverflow.com/questions">Questions</a></li>
                            <li><a id="nav-tags" href="http://stackoverflow.com/tags">Tags</a></li>
                            <li><a id="nav-tour" href="http://stackoverflow.com/about">Tour</a></li>
                            <li><a id="nav-users" href="http://stackoverflow.com/users">Users</a></li>
                    </ul>
                </div>
                <div class="nav askquestion">
                    <ul>
                        <li>
                            <a id="nav-askquestion" href="http://stackoverflow.com/questions/ask">Ask Question</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        



        <div id="content">
            

<div itemscope="" itemtype="http://schema.org/Article">
	<link itemprop="image" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
			<!--googleoff: all-->

<div id="herobox-mini">

    <div id="hero-content">
        <span id="controls">
            <a href="http://stackoverflow.com/about" id="tell-me-more" class="button">Tell me more</a>
            <span id="close"><a title="click to dismiss">×</a></span>
        </span>
        <div id="blurb">
            Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
        </div>        
    </div>
    <script>
        $('#tell-me-more').click(function () {
            var clickSource = $("body").attr("class") + '-mini';
            if ($("body").hasClass("questions-page")) {
                clickSource = 'questionpagemini';
            }
            if ($("body").hasClass("home-page")) {
                clickSource = 'homepagemini';
            }

            StackExchange.using("gps", function () {
                StackExchange.gps.track("aboutpage.click", { aboutclick_location: clickSource } , true);
            });
        });
        $('#herobox-mini #close').click(function () {
            StackExchange.using("gps", function () {
                StackExchange.gps.track("hero.action", { hero_action_type: "close" }, true);
            });
            $.cookie("hero", "none", { path: "/" });
            var $hero = $("#herobox-mini");
            $hero.slideUp('fast', function () { $hero.remove(); });
            return false;
        });
    </script>
</div>
			<!--googleon: all-->
			<div id="question-header">
			<h1 itemprop="name"><a href="./html - Center image using text-align center  - Stack Overflow_files/html - Center image using text-align center  - Stack Overflow.htm" class="question-hyperlink">Center image using text-align center?</a></h1>
		</div>
			<div id="mainbar">

			

<div class="question" data-questionid="7055393" id="question">
    
    <script type="text/javascript">
                var ados = ados || {};ados.run = ados.run || [];
                ados.run.push(function() { ados_add_placement(22,8277,"adzerk2110558507",4).setZone(43) ; });                    
            </script>
            <div class="everyonelovesstackoverflow" id="adzerk2110558507">
            </div>    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="7055393">
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear">up vote</a>
    <span class="vote-count-post ">69</span>
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful">down vote</a>
    
    <a class="star-off" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#" title="This is a favorite question (click again to undo)">favorite</a>
    <div class="favoritecount"><b>31</b></div>   

</div>

            </td>
            
<td class="postcell">
<div>
    <div class="post-text" itemprop="description">

        <p>Is the property <code>text-align: center;</code> a good way to center an image using CSS?</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">img </span><span class="pun">{</span><span class="pln">
    text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

    </div>
    <div class="post-taglist">
        <a href="http://stackoverflow.com/questions/tagged/html" class="post-tag" title="show questions tagged &#39;html&#39;" rel="tag">html</a> <a href="http://stackoverflow.com/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a> 
    </div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/q/7055393" title="short permalink to this question" class="short-link" id="link-post-7055393">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/7055393/edit" class="suggest-edit-post" title="">improve this question</a></div>        
    </td>
    <td align="right" class="post-signature">
<div class="user-info user-hover">
    <div class="user-action-time">
        <a href="http://stackoverflow.com/posts/7055393/revisions" title="show all edits to this post">edited <span title="2013-08-15 01:44:50Z" class="relativetime">Aug 15 at 1:44</span></a>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/5640/geochet"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/680b8d4a9b843a858148493db5ef0164" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/5640/geochet">GEOCHET</a><br>
        <span class="reputation-score" title="reputation score 12995" dir="ltr">13k</span><span title="12 gold badges"><span class="badge1"></span><span class="badgecount">12</span></span><span title="45 silver badges"><span class="badge2"></span><span class="badgecount">45</span></span><span title="75 bronze badges"><span class="badge3"></span><span class="badgecount">75</span></span>
    </div>
</div>    </td>
    <td class="post-signature owner">
        <div class="user-info user-hover">
    <div class="user-action-time">
        asked <span title="2011-08-14 06:21:52Z" class="relativetime">Aug 14 '11 at 6:21</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/552067/web-designer"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/12ce9b9ec9f98fdbe2b3c47eedfbfcc9" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/552067/web-designer">Web_Designer</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">7,907</span><span title="25 gold badges"><span class="badge1"></span><span class="badgecount">25</span></span><span title="93 silver badges"><span class="badge2"></span><span class="badgecount">93</span></span><span title="159 bronze badges"><span class="badge3"></span><span class="badgecount">159</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</div>
</td>
        </tr>
<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-7055393" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-7055393" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments.">add comment</a>
    </td>
</tr>            </tbody></table>    
</div>


			<div id="answers">

				<a name="tab-top"></a>
				<div id="answers-header">
					<div class="subheader answers-subheader">
						<h2>
								8 Answers
						</h2>
						<div>
							<div id="tabs">
        <a href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center?answertab=active#tab-top" title="Answers with the latest activity first">active</a>
        <a href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center?answertab=oldest#tab-top" title="Answers in the order they were provided">oldest</a>
        <a class="youarehere" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center?answertab=votes#tab-top" title="Answers with the highest score first">votes</a>
</div>
						</div>
					</div>    
				</div>    




  
<a name="7055404"></a>
<div id="answer-7055404" class="answer accepted-answer" data-answerid="7055404">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="7055404">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">157</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


        <span class="vote-accepted-on load-accepted-answer-date" title="The question owner accepted this as the best answer Aug 14 &#39;11 at 6:48">accepted</span>
</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>That is not the recommended way as it is not supported by W3C.</p>

<p>Use this instead:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">img</span><span class="pun">.</span><span class="pln">center </span><span class="pun">{</span><span class="pln">
    display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">-</span><span class="pln">right</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/7055404" title="short permalink to this answer" class="short-link" id="link-post-7055404">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/7055404/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
    <td align="right" class="post-signature">
<div class="user-info user-hover">
    <div class="user-action-time">
        <a href="http://stackoverflow.com/posts/7055404/revisions" title="show all edits to this post">edited <span title="2013-07-15 01:14:35Z" class="relativetime">Jul 15 at 1:14</span></a>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/552067/web-designer"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/12ce9b9ec9f98fdbe2b3c47eedfbfcc9" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/552067/web-designer">Web_Designer</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">7,907</span><span title="25 gold badges"><span class="badge1"></span><span class="badgecount">25</span></span><span title="93 silver badges"><span class="badge2"></span><span class="badgecount">93</span></span><span title="159 bronze badges"><span class="badge3"></span><span class="badgecount">159</span></span>
    </div>
</div>    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover">
    <div class="user-action-time">
        answered <span title="2011-08-14 06:25:17Z" class="relativetime">Aug 14 '11 at 6:25</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/244353/mrchief"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/3ec4378e62a1eb052941217776ea0f2d" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/244353/mrchief">Mrchief</a><br>
        <span class="reputation-score" title="reputation score 21685" dir="ltr">21.7k</span><span title="4 gold badges"><span class="badge1"></span><span class="badgecount">4</span></span><span title="31 silver badges"><span class="badge2"></span><span class="badgecount">31</span></span><span title="75 bronze badges"><span class="badge3"></span><span class="badgecount">75</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-7055404" class="comments" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">

    <tr id="comment-8436674" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">Okay, thank you!</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/552067/web-designer" title="7907 reputation" class="comment-user owner">Web_Designer</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment8436674_7055404"><span title="2011-08-14 06:48:21Z" class="relativetime-clean">Aug 14 '11 at 6:48</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-21291467" class="comment">
        <td class="comment-actions">
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                                <span title="number of &#39;useful comment&#39; votes received" class="cool">2</span>   
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">i tried this method and it works! but when I tried 2 images, it didn't work, it just stack on top of each other like a totem, any ideas how to align 2 images on the same line in the middle?</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/616482/patrickgamboa" title="243 reputation" class="comment-user">PatrickGamboa</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment21291467_7055404"><span title="2013-02-28 04:20:13Z" class="relativetime-clean">Feb 28 at 4:20</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-21460391" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">the css display block basically puts all img.center on separate lines.  you have to hack around the code to get your desired effect. set width:350px; or what your 2 image width is. make both images into one actual jpeg etc</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/842970/jon" title="548 reputation" class="comment-user">Jon</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment21460391_7055404"><span title="2013-03-05 12:59:35Z" class="relativetime-clean">Mar 5 at 12:59</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-21571763" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">@PatrickSerrano: See this answer: <a href="http://stackoverflow.com/a/11819439/244353">stackoverflow.com/a/11819439/244353</a></span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/244353/mrchief" title="21685 reputation" class="comment-user">Mrchief</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment21571763_7055404"><span title="2013-03-08 05:44:19Z" class="relativetime-clean">Mar 8 at 5:44</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-22149065" class="comment">
        <td class="comment-actions">
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                                <span title="number of &#39;useful comment&#39; votes received" class="cool">1</span>   
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">Thanks, I worked like an charm...</span>
	–&nbsp;
		<span title="0 reputation" class="comment-user">user1829744</span>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment22149065_7055404"><span title="2013-03-25 13:34:07Z" class="relativetime-clean">Mar 25 at 13:34</span></a></span>
				</div>

        </td>
    </tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-7055404" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>
<script type="text/javascript">
                var ados = ados || {};ados.run = ados.run || [];
                ados.run.push(function() { ados_add_placement(22,8277,"adzerk609882210",4).setZone(44) ; });                    
            </script>
            <div class="everyonelovesstackoverflow" id="adzerk609882210">
            </div>
  
<a name="7055401"></a>
<div id="answer-7055401" class="answer" data-answerid="7055401">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="7055401">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">23</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>That doesn't always work... if it doesn't, try:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">img </span><span class="pun">{</span><span class="pln">
    display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/7055401" title="short permalink to this answer" class="short-link" id="link-post-7055401">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/7055401/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info ">
    <div class="user-action-time">
        answered <span title="2011-08-14 06:24:16Z" class="relativetime">Aug 14 '11 at 6:24</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/890486/antimatterfish"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/a0cb3b487b505fd5398e06fdb1d1e328" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/890486/antimatterfish">antimatterfish</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">444</span><span title="3 silver badges"><span class="badge2"></span><span class="badgecount">3</span></span><span title="7 bronze badges"><span class="badge3"></span><span class="badgecount">7</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-7055401" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-7055401" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="10704112"></a>
<div id="answer-10704112" class="answer" data-answerid="10704112">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="10704112">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">18</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>Came across <a href="http://hungred.com/how-to/tutorial-align-center-screen-position-absolute-css/">this post</a> and it worked for me:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">img </span><span class="pun">{</span><span class="pln">
    position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln">
    top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">

</span><span class="pun">}</span></code></pre>

<p>(Vertical and horizontal alignment)</p>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/10704112" title="short permalink to this answer" class="short-link" id="link-post-10704112">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/10704112/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover">
    <div class="user-action-time">
        answered <span title="2012-05-22 14:28:49Z" class="relativetime">May 22 '12 at 14:28</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/1029612/shairez"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/8cef38b9f215228a8630ec2a51b29b3b" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/1029612/shairez">ShaiRez</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">2,160</span><span title="7 silver badges"><span class="badge2"></span><span class="badgecount">7</span></span><span title="16 bronze badges"><span class="badge3"></span><span class="badgecount">16</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-10704112" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-10704112" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="7055400"></a>
<div id="answer-7055400" class="answer" data-answerid="7055400">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="7055400">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">4</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>Only if you need to support ancient IE browsers.</p>

<p>The modern approach is to do <code>margin: 0 auto</code> in your CSS.</p>

<p>Example here: <a href="http://jsfiddle.net/bKRMY/" rel="nofollow">http://jsfiddle.net/bKRMY/</a></p>

<p>HTML:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="tag">&lt;p&gt;</span><span class="pln">Hello the following image is centered</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pic"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"</span><span class="tag">/&gt;&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;p&gt;</span><span class="pln">Did it work?</span><span class="tag">&lt;/p&gt;</span></code></pre>

<p>CSS:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">p</span><span class="pun">.</span><span class="pln">pic </span><span class="pun">{</span><span class="pln">
    width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">48px</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>Only issue ihere is that <em>the width of the paragraph must be the same as the width of the image</em>.  If you don't put a width on the paragraph, it will not work, because it will assume 100% and your image will be aligned left, unless of course you use <code>text-align:center</code>.</p>

<p>Try out the fiddle and experiment with it if you like.</p>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/7055400" title="short permalink to this answer" class="short-link" id="link-post-7055400">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/7055400/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
    <td align="right" class="post-signature">
<div class="user-info ">
    <div class="user-action-time">
        <a href="http://stackoverflow.com/posts/7055400/revisions" title="show all edits to this post">edited <span title="2011-08-14 06:42:08Z" class="relativetime">Aug 14 '11 at 6:42</span></a>
    </div>
    <div class="user-gravatar32">
        
    </div>
    <div class="user-details">
        <br>
        
    </div>
</div>    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info ">
    <div class="user-action-time">
        answered <span title="2011-08-14 06:24:09Z" class="relativetime">Aug 14 '11 at 6:24</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/831878/ray-toal"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/1d1a4823c46ad92f357b4bb7e74a64b0" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/831878/ray-toal">Ray Toal</a><br>
        <span class="reputation-score" title="reputation score 29460" dir="ltr">29.5k</span><span title="1 gold badge"><span class="badge1"></span><span class="badgecount">1</span></span><span title="36 silver badges"><span class="badge2"></span><span class="badgecount">36</span></span><span title="69 bronze badges"><span class="badge3"></span><span class="badgecount">69</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-7055400" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-7055400" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="15466527"></a>
<div id="answer-15466527" class="answer" data-answerid="15466527">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="15466527">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">3</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>simply change parent align :)</p>

<p>Try this one on parent properties <code>text-align:center</code></p>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/15466527" title="short permalink to this answer" class="short-link" id="link-post-15466527">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/15466527/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
    <td align="right" class="post-signature">
<div class="user-info ">
    <div class="user-action-time">
        <a href="http://stackoverflow.com/posts/15466527/revisions" title="show all edits to this post">edited <span title="2013-11-09 22:35:29Z" class="relativetime">Nov 9 at 22:35</span></a>
    </div>
    <div class="user-gravatar32">
        
    </div>
    <div class="user-details">
        <br>
        
    </div>
</div>    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info user-hover">
    <div class="user-action-time">
        answered <span title="2013-03-17 21:37:13Z" class="relativetime">Mar 17 at 21:37</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/884521/bboymaanu"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/b096fdd882f826178a7eb8c56e1a1aa5" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/884521/bboymaanu">bboymaanu</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">1,112</span><span title="1 gold badge"><span class="badge1"></span><span class="badgecount">1</span></span><span title="14 silver badges"><span class="badge2"></span><span class="badgecount">14</span></span><span title="47 bronze badges"><span class="badge3"></span><span class="badgecount">47</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-15466527" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-15466527" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="14424555"></a>
<div id="answer-14424555" class="answer" data-answerid="14424555">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="14424555">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">2</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>Another way of doing would be centering an enclosing paragraph:</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">text-align</span><span class="pun">:</span><span class="pln">center</span><span class="atv">"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"..."</span><span class="tag">/&gt;&lt;/p&gt;</span></code></pre>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/14424555" title="short permalink to this answer" class="short-link" id="link-post-14424555">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/14424555/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
    <td align="right" class="post-signature">
<div class="user-info user-hover">
    <div class="user-action-time">
        <a href="http://stackoverflow.com/posts/14424555/revisions" title="show all edits to this post">edited <span title="2013-01-20 12:51:29Z" class="relativetime">Jan 20 at 12:51</span></a>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/550618/regilero"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/6dbbc19034f22896982dd7acee33ab26" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/550618/regilero">regilero</a><br>
        <span class="reputation-score" title="reputation score 10184" dir="ltr">10.2k</span><span title="1 gold badge"><span class="badge1"></span><span class="badgecount">1</span></span><span title="11 silver badges"><span class="badge2"></span><span class="badgecount">11</span></span><span title="44 bronze badges"><span class="badge3"></span><span class="badgecount">44</span></span>
    </div>
</div>    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info ">
    <div class="user-action-time">
        answered <span title="2013-01-20 12:32:00Z" class="relativetime">Jan 20 at 12:32</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/1640607/"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/2907df4a04175b7ba0e2479b5bc81450" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/1640607/">عصام باحسن</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">31</span><span title="1 bronze badge"><span class="badge3"></span><span class="badgecount">1</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-14424555" class="comments" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">

    <tr id="comment-20078575" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">Doesn't answer the question.</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/573034/guandalino" title="2568 reputation" class="comment-user">Guandalino</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment20078575_14424555"><span title="2013-01-20 12:52:45Z" class="relativetime-clean">Jan 20 at 12:52</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-20078627" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">doesn't answer the question</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/853872/ani" title="1200 reputation" class="comment-user">Ani</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment20078627_14424555"><span title="2013-01-20 12:56:03Z" class="relativetime-clean">Jan 20 at 12:56</span></a></span>
				</div>

        </td>
    </tr>
    <tr id="comment-21967055" class="comment">
        <td>
            <table>
                <tbody>
                    <tr>
                        <td class="comment-score">
                            
                        </td>
                        <td>
                                &nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>   
        </td>
        <td class="comment-text">
            <div style="display: block;" class="comment-body">
	<span class="comment-copy">I would disagree, I think this does answer the question. The OP asked whether or not the property <code>text-align: center</code> is a good way to center an image, and <i>did not specify</i> that the property had to be a part of the img tag. This answer uses the property in question in an effort to provide a solution (that does work).</span>
	–&nbsp;
		<a href="http://stackoverflow.com/users/1351985/mandm" title="172 reputation" class="comment-user">MandM</a>
	<span class="comment-date" dir="ltr"><a class="comment-link" href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#comment21967055_14424555"><span title="2013-03-19 22:19:15Z" class="relativetime-clean">Mar 19 at 22:19</span></a></span>
				</div>

        </td>
    </tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-14424555" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="12945521"></a>
<div id="answer-12945521" class="answer" data-answerid="12945521">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="12945521">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">1</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>Actually, the only problem with your code is that the <code>text-align</code> attribute applies to text (yes, images count as text) inside of the tag.  You would want to put a <code>span</code> tag around the image and set <em>its</em> style to <code>text-align: center</code>, as so:  </p>

<p>HTML code:  </p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"centerImage"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"..."</span><span class="pln"> </span><span class="tag">/&gt;&lt;/span&gt;</span></code></pre>

<p>CSS code:  </p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="pln">span</span><span class="pun">.</span><span class="pln">centerImage </span><span class="pun">{</span><span class="pln">
     text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>The image will be centered.  In response to your question, it is the easiest and most foolproof way to center images, as long as you remember to apply the rule to the image's containing <code>span</code> (or <code>div</code>).  </p>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/12945521" title="short permalink to this answer" class="short-link" id="link-post-12945521">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/12945521/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info ">
    <div class="user-action-time">
        answered <span title="2012-10-18 00:40:26Z" class="relativetime">Oct 18 '12 at 0:40</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/1718744/code-monkey"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/a96a824a60d4b9a4100749e9324e5367" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/1718744/code-monkey">Code Monkey</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">290</span><span title="1 silver badge"><span class="badge2"></span><span class="badgecount">1</span></span><span title="19 bronze badges"><span class="badge3"></span><span class="badgecount">19</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-12945521" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-12945521" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>

  
<a name="16621400"></a>
<div id="answer-16621400" class="answer" data-answerid="16621400">
    <table>
        <tbody><tr>
            <td class="votecell">
                

<div class="vote">
    <input type="hidden" name="_id_" value="16621400">
    <a class="vote-up-off" title="This answer is useful">up vote</a>
    <span class="vote-count-post ">1</span>
    <a class="vote-down-off" title="This answer is not useful">down vote</a>
    


</div>

            </td>



<td class="answercell">
    <div class="post-text"><p>if you are using a class with image then the following will do</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="kwd">class</span><span class="pun">{</span><span class="pln">
    display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>if it is only an image in a specific calss that you want to center align then following will do</p>

<pre class="default prettyprint prettyprinted" style=""><code><span class="kwd">class</span><span class="pln"> img </span><span class="pun">{</span><span class="pln">
    display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
    margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>
</div>
    <table class="fw">
    <tbody><tr>
    <td class="vt">
<div class="post-menu"><a href="http://stackoverflow.com/a/16621400" title="short permalink to this answer" class="short-link" id="link-post-16621400">share</a><span class="lsep">|</span><a href="http://stackoverflow.com/posts/16621400/edit" class="suggest-edit-post" title="">improve this answer</a></div>                    </td>
            


    <td align="right" class="post-signature">   
       

    <div class="user-info ">
    <div class="user-action-time">
        answered <span title="2013-05-18 06:26:24Z" class="relativetime">May 18 at 6:26</span>
    </div>
    <div class="user-gravatar32">
        <a href="http://stackoverflow.com/users/1936229/baig"><div><img src="./html - Center image using text-align center  - Stack Overflow_files/b3649e523a8361ebee687764b7a13030" alt="" width="32" height="32" class="hoverZoomLink"></div></a>
    </div>
    <div class="user-details">
        <a href="http://stackoverflow.com/users/1936229/baig">Baig</a><br>
        <span class="reputation-score" title="reputation score " dir="ltr">56</span><span title="7 bronze badges"><span class="badge3"></span><span class="badgecount">7</span></span>
    </div>
</div>
    </td>
    </tr>
    </tbody></table>
</td>        </tr>

<tr>
    <td class="votecell"></td>
    <td>
	    <div id="comments-16621400" class="comments dno" data-localized="true">
		    <table>
			    <tbody data-remaining-comments-count="0" data-addlink-html="add comment" data-addlink-disabled="true">
					    <tr><td></td><td></td></tr>
			    </tbody>
		    </table>
	    </div>
			<a id="comments-link-16621400" data-rep="50" data-anon="true" class="comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.">add comment</a>
    </td>
</tr>
    </tbody></table>
</div>
									<a name="new-answer"></a>
						<form id="post-form" action="http://stackoverflow.com/questions/7055393/answer/submit" method="post" class="post-form">
							<input type="hidden" id="post-id" value="7055393">
							<h2 class="space">Your Answer</h2>



    

<script type="text/javascript">
    StackExchange.ready(function() {
        initTagRenderer("".split(" "), "".split(" "));
         
        prepareEditor({
            heartbeatType: 'answer',
            bindNavPrevention: true,
            postfix: "",
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
        });
        

    });  
</script>


<div id="post-editor" class="post-editor">

    <div style="position: relative;">     
        <div class="wmd-container">
            <div id="wmd-button-bar" class="wmd-button-bar"><ul id="wmd-button-row" class="wmd-button-row"><li id="wmd-bold-button" class="wmd-button" style="left: 0px;"><span style="background-position: 0px -20px;"></span></li><li id="wmd-italic-button" class="wmd-button" style="left: 25px;"><span style="background-position: -20px -20px;"></span></li><li id="wmd-spacer1" class="wmd-spacer" style="left: 50px;"><span style="background-position: -40px -20px;"></span></li><li id="wmd-link-button" class="wmd-button" style="left: 75px;"><span style="background-position: -40px -20px;"></span></li><li id="wmd-quote-button" class="wmd-button" style="left: 100px;"><span style="background-position: -60px -20px;"></span></li><li id="wmd-code-button" class="wmd-button" style="left: 125px;"><span style="background-position: -80px -20px;"></span></li><li id="wmd-image-button" class="wmd-button" style="left: 150px;"><span style="background-position: -100px -20px;"></span></li><li id="wmd-spacer2" class="wmd-spacer" style="left: 175px;"><span style="background-position: -120px -20px;"></span></li><li id="wmd-olist-button" class="wmd-button" style="left: 200px;"><span style="background-position: -120px -20px;"></span></li><li id="wmd-ulist-button" class="wmd-button" style="left: 225px;"><span style="background-position: -140px -20px;"></span></li><li id="wmd-heading-button" class="wmd-button" style="left: 250px;"><span style="background-position: -160px -20px;"></span></li><li id="wmd-hr-button" class="wmd-button" style="left: 275px;"><span style="background-position: -180px -20px;"></span></li><li id="wmd-spacer3" class="wmd-spacer" style="left: 300px;"><span style="background-position: -200px -20px;"></span></li><li id="wmd-undo-button" class="wmd-button" style="left: 325px;"><span style="background-position: -200px -20px;"></span></li><li id="wmd-redo-button" class="wmd-button" style="left: 350px;"><span style="background-position: -220px -20px;"></span></li></ul></div>
            <textarea id="wmd-input" class="wmd-input" name="post-text" cols="92" rows="15" tabindex="101" data-min-length=""></textarea>
        </div>
    </div>

    <div class="fl" style="margin-top: 8px; height:24px;">&nbsp;</div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>

    <div id="draft-discarded" class="draft-discarded community-option fl" style="margin-top: 8px; height:24px; display:none;">draft discarded</div>



    <div id="wmd-preview" class="wmd-preview"></div>
    <div></div>
    <div class="edit-block">
        <input id="fkey" name="fkey" type="hidden" value="8ba693d5576fed9c6ca897c79524a525">
        <input id="author" name="author" type="text">
    </div>
</div>
							<div style="position: relative;">
								
            <div class="form-item new-post-login">
        
                <div class="new-login-form">
                    <div class="new-login-left">
                        <h3>Sign up or <a id="login-link" href="http://stackoverflow.com/users/login?returnurl=%2fquestions%2f7055393%2fcenter-image-using-text-align-center%23new-answer">login</a></h3>
                        <script type="text/javascript">
                            StackExchange.ready(function () {
                                StackExchange.helpers.onClickDraftSave('#login-link');
                            });
                        </script>
                        <div class="preferred-login google-login">
                            <p><span class="icon"></span><span>Sign up using Google</span></p>
                        </div>
                        <div class="preferred-login facebook-login">
                            <p><span class="icon"></span><span>Sign up using Facebook</span></p>
                        </div>
                        <div class="preferred-login stackexchange-login">
                            <p><span class="icon"></span><span>Sign up using Stack Exchange</span></p>
                        </div>
                    </div>
                    <input type="hidden" name="manual-openid" class="manual-openid">
                    <input type="hidden" name="use-facebook" class="use-facebook" value="false">
                    <input type="button" class="submit-openid" value="Submit" style="display:none">
                    <div class="new-login-right">
                                <h3>Post as a guest</h3>
    <div class="form-item">
        <table>
        <tbody><tr>
                    <script type="text/javascript">
                StackExchange.ready(function () {
                    StackExchange.helpers.bindHelpOverlayEvents($('.vm input'));
                });
            </script>
            <td class="vm">
                <div>
                    <label for="display-name">Name</label>
                    <input id="display-name" name="display-name" type="text" size="30" maxlength="30" value="" tabindex="105">
                </div>
                <div>
                    <label for="m-address">Email</label>
                    <input id="m-address" name="m-address" type="text" size="30" maxlength="100" value="" tabindex="106">
                    <span class="edit-field-overlay">required, but not shown</span>
                </div>
            </td>
        </tr>
        </tbody></table>
    </div>

                    </div>
                </div>
            </div>
            <script type="text/javascript">
                StackExchange.ready(
                    function () {
                        StackExchange.openid.initPostLogin('.new-post-login', '%2fquestions%2f7055393%2fcenter-image-using-text-align-center%23new-answer');
                    }
                );
            </script>
            <noscript>
                        &lt;h3&gt;Post as a guest&lt;/h3&gt;
    &lt;div class="form-item"&gt;
        &lt;table&gt;
        &lt;tr&gt;
                    &lt;script type="text/javascript"&gt;
                StackExchange.ready(function () {
                    StackExchange.helpers.bindHelpOverlayEvents($('.vm input'));
                });
            &lt;/script&gt;
            &lt;td class="vm"&gt;
                &lt;div&gt;
                    &lt;label for="display-name"&gt;Name&lt;/label&gt;
                    &lt;input id="display-name" name="display-name" type="text" size="30" maxlength="30" value="" tabindex="105"&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;label for="m-address"&gt;Email&lt;/label&gt;
                    &lt;input id="m-address" name="m-address" type="text" size="30" maxlength="100" value="" tabindex="106"&gt;
                    &lt;span class="edit-field-overlay"&gt;required, but not shown&lt;/span&gt;
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;

            </noscript>
							</div>
           
															<div class="form-submit cbt">
									<input id="submit-button" type="submit" value="Post Your Answer" tabindex="110">
									<a href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#" class="discard-answer dno">discard</a>

<p class="privacy-policy-agreement">
By posting your answer, you agree to the <a href="http://stackexchange.com/legal/privacy-policy" target="_blank">privacy policy</a> and <a href="http://stackexchange.com/legal/terms-of-service" target="_blank">terms of service</a>.</p>
<input type="hidden" name="legalLinksShown" value="1">								</div>
						</form>



						<h2 class="bottom-notice">
Not the answer you're looking for?							Browse other questions tagged <a href="http://stackoverflow.com/questions/tagged/html" class="post-tag" title="show questions tagged &#39;html&#39;" rel="tag">html</a> <a href="http://stackoverflow.com/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a>  or <a href="http://stackoverflow.com/questions/ask">ask your own question</a>.						</h2>
			</div>
		</div>
				<div id="sidebar" class="show-votes">
							<div class="module question-stats">
					<p class="label-key">tagged</p>
					<div class="tagged"><a href="http://stackoverflow.com/questions/tagged/html" class="post-tag" title="show questions tagged &#39;html&#39;" rel="tag">html</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">×</span>&nbsp;<span class="item-multiplier-count">229384</span></span><br>
<a href="http://stackoverflow.com/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">×</span>&nbsp;<span class="item-multiplier-count">177652</span></span><br>
</div>
					<table id="qinfo">
						<tbody><tr>
							<td>
								<p class="label-key">asked</p>
							</td>
							<td style="padding-left: 10px">
								<p class="label-key" title="2011-08-14 06:21:52Z"><b>2 years ago</b></p>
							</td>
						</tr>
						<tr>
							<td>
								<p class="label-key">viewed</p>
							</td>

							<td style="padding-left: 10px">
								<p class="label-key">
									<b>147469 times</b>
								</p>
							</td>
						</tr>
							<tr>
								<td>
									<p class="label-key">active</p>
								</td>
								<td style="padding-left: 10px">
									<p class="label-key"><b><a href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center?lastactivity" class="lastactivity-link" title="2013-11-09 22:35:29Z">28 days ago</a></b></p>
								</td>
							</tr>
					</tbody></table>
				</div>
						
			<script type="text/javascript">
                var ados = ados || {};ados.run = ados.run || [];
                ados.run.push(function() { ados_add_placement(22,8277,"adzerk1012240981",17).setZone(45) ; });                    
            </script>
            <div class="everyonelovesstackoverflow" id="adzerk1012240981">
            </div>  
    <div id="hireme"> <a href="http://careers.stackoverflow.com/jobs?a=144" class="top" target="_blank"></a> <ul class="jobs"> <li> <a href="http://careers.stackoverflow.com/jobs/43653/django-python-web-developer-news-media-san-antonio-current-co?a=ReQX3xCM" target="_blank" title="Django/Python web developer (news media) at San Antonio Current Co. Click to learn more."> Django/Python web developer (news media)<br> <span class="company">San Antonio Current Co</span> <span class="location">San Antonio, TX</span> </a> </li> <li> <a href="http://careers.stackoverflow.com/jobs/43678/front-end-developer-designer-san-antonio-current-co?a=RgK9GFuo" target="_blank" title="Front-end developer / designer at San Antonio Current Co. Click to learn more."> Front-end developer / designer<br> <span class="company">San Antonio Current Co</span> <span class="location">San Antonio, TX</span> </a> </li> <li> <a href="http://careers.stackoverflow.com/jobs/44549/web-developer-front-end-jobs2careers?a=SkBym7FC" target="_blank" title="Web Developer (Front End) at Jobs2Careers. Click to learn more."> Web Developer (Front End)<br> <span class="company">Jobs2Careers</span> <span class="location">Austin, TX / relocation</span> </a> </li> <li class="city"><a href="http://careers.stackoverflow.com/jobs/location/san%20antonio%2c%20tx%2c%20united%20states?a=x0VW">More jobs near San Antonio...</a></li> </ul> <img alt="" class="impression" src="http://careers.stackoverflow.com/ad/i/ReQX3xCM-RgK9GFuo-SkBym7FC-144-x0VW" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 1px 1px;" width="0" height="0"></div>
			  
    
            <div class="module sidebar-linked">
	<h4 id="h-linked">Linked</h4>
	<div class="linked" data-tracker="lq=1">
<div class="spacer">
	<a href="http://stackoverflow.com/q/18511620?lq=1" title="Vote score (upvotes - downvotes)">
		<div class="answer-votes  default">0</div>
	</a>
	<a href="http://stackoverflow.com/questions/18511620/align-image-in-center?lq=1" class="question-hyperlink">Align image in center</a>
</div><div class="spacer">
	<a href="http://stackoverflow.com/q/11819417?lq=1" title="Vote score (upvotes - downvotes)">
		<div class="answer-votes answered-accepted default">5</div>
	</a>
	<a href="http://stackoverflow.com/questions/11819417/css-center-two-images-in-css-side-by-side?lq=1" class="question-hyperlink">CSS - center two images in css side by side</a>
</div><div class="spacer">
	<a href="http://stackoverflow.com/q/8214152?lq=1" title="Vote score (upvotes - downvotes)">
		<div class="answer-votes answered-accepted default">4</div>
	</a>
	<a href="http://stackoverflow.com/questions/8214152/center-two-images-in-a-div?lq=1" class="question-hyperlink">Center two images in a div</a>
</div><div class="spacer">
	<a href="http://stackoverflow.com/q/11799068?lq=1" title="Vote score (upvotes - downvotes)">
		<div class="answer-votes  default">0</div>
	</a>
	<a href="http://stackoverflow.com/questions/11799068/er-method-image-tag-centered?lq=1" class="question-hyperlink">ER method “image_tag” centered?</a>
</div><div class="spacer">
	<a href="http://stackoverflow.com/q/16757135?lq=1" title="Vote score (upvotes - downvotes)">
		<div class="answer-votes answered-accepted default">2</div>
	</a>
	<a href="http://stackoverflow.com/questions/16757135/how-to-make-the-element-located-in-the-center-of-a-div?lq=1" class="question-hyperlink">How to make the element located in the center of a div?</a>
</div>			</div>
</div>

				<div class="module sidebar-related">
					<h4 id="h-related">Related</h4>
					<div class="related" data-tracker="rq=1">
						<div class="spacer">
<a href="http://stackoverflow.com/q/306252?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted large">610
    </div>
</a><a href="http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers?rq=1" class="question-hyperlink">How to align checkboxes and their labels consistently cross-browsers</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/489340?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted large">616
    </div>
</a><a href="http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css?rq=1" class="question-hyperlink">How do I vertically align text next to an image with CSS?</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/492809?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted large">604
    </div>
</a><a href="http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1" class="question-hyperlink">When to use IMG vs. CSS background-image?</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/806000?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted large">750
    </div>
</a><a href="http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text?rq=1" class="question-hyperlink">CSS: semi-transparent background, but not text</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/1238115?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted default">33
    </div>
</a><a href="http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup?rq=1" class="question-hyperlink">using text-align center in colgroup</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/8576140?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted default">0
    </div>
</a><a href="http://stackoverflow.com/questions/8576140/aligning-text-in-center-in-a-fixed-width-div-with-an-image?rq=1" class="question-hyperlink">Aligning text in center in a fixed width div with an image</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/8865458?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted default">83
    </div>
</a><a href="http://stackoverflow.com/questions/8865458/how-to-align-text-vertical-center-in-div-with-css?rq=1" class="question-hyperlink">how to align text vertical center in div with css</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/10449531?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted default">0
    </div>
</a><a href="http://stackoverflow.com/questions/10449531/align-images-different-size-and-text-to-center-in-list?rq=1" class="question-hyperlink">Align images (different size) and text to center in list?</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/16625056?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes default">0
    </div>
</a><a href="http://stackoverflow.com/questions/16625056/text-centered-next-to-image-and-if-no-space-aligned-to-top?rq=1" class="question-hyperlink">Text centered next to image, and if no space, aligned to top</a>
</div>
<div class="spacer">
<a href="http://stackoverflow.com/q/19584027?rq=1" title="Vote score (upvotes - downvotes)">
    <div class="answer-votes answered-accepted default">1
    </div>
</a><a href="http://stackoverflow.com/questions/19584027/centering-images-with-text-align?rq=1" class="question-hyperlink">Centering images with text-align</a>
</div>

					</div>
				</div>
		</div>
	
<div id="feed-link">
    <div id="feed-link-text"><a href="http://stackoverflow.com/feeds/question/7055393" title="feed of this question and its answers"><span class="feed-icon"></span>question feed</a></div>
</div>
	<script type="text/javascript">
StackExchange.ready(function(){$.get('/posts/7055393/ivc/57ff');});
</script>
<noscript>
    &lt;div&gt;&lt;img src="/posts/7055393/ivc/57ff" class="dno" alt="" width="0" height="0"&gt;&lt;/div&gt;
</noscript><div style="display:none" id="prettify-lang">default</div></div>


        </div>
    </div>
    <div id="footer" class="categories">
        <div class="footerwrap">
            <div id="footer-menu">
                <div class="top-footer-links">
                        <a href="http://stackoverflow.com/about">about</a>
                    <a href="http://stackoverflow.com/help">help</a>
                        <a href="http://stackoverflow.com/help/badges">badges</a>
                    <a href="http://blog.stackexchange.com/?blb=1">blog</a>
                        <a href="http://chat.stackoverflow.com/">chat</a>
                    <a href="http://data.stackexchange.com/">data</a>
                    <a href="http://stackexchange.com/legal">legal</a>
                    <a href="http://stackexchange.com/legal/privacy-policy">privacy policy</a>
                    <a href="http://stackexchange.com/about/hiring">jobs</a>
                    <a href="http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6MjAsImNtIjo5NTQsImNoIjoxMTc4LCJjciI6Mjc3NiwiZG0iOjQsImZjIjoyODYyLCJmbCI6Mjc1MSwibnciOjIyLCJydiI6MCwicHIiOjExNSwic3QiOjAsInVyIjoiaHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL2Fib3V0L2NvbnRhY3QiLCJyZSI6MX0&s=hRods5B22XvRBwWIwtIMekcyNF8">advertising info</a>

                    <a onclick="StackExchange.switchMobile(&quot;on&quot;, &quot;/questions/7055393/center-image-using-text-align-center&quot;)">mobile</a>
                    <b><a href="http://stackoverflow.com/contact">contact us</a></b>
                        <b><a href="http://meta.stackoverflow.com/">feedback</a></b>
                    
                </div>
                <div id="footer-sites">
                    <table>
    <tbody><tr>
            <th colspan="3">
                Technology
            </th>
            <th>
                Life / Arts
            </th>
            <th>
                Culture / Recreation
            </th>
            <th>
                Science
            </th>
            <th>
                Other
            </th>
    </tr>
    <tr>
            <td>
                <ol>
                        <li><a href="http://stackoverflow.com/" title="professional and enthusiast programmers">Stack Overflow</a></li>
                        <li><a href="http://serverfault.com/" title="professional system and network administrators">Server Fault</a></li>
                        <li><a href="http://superuser.com/" title="computer enthusiasts and power users">Super User</a></li>
                        <li><a href="http://webapps.stackexchange.com/" title="power users of web applications">Web Applications</a></li>
                        <li><a href="http://askubuntu.com/" title="Ubuntu users and developers">Ask Ubuntu</a></li>
                        <li><a href="http://webmasters.stackexchange.com/" title="pro webmasters">Webmasters</a></li>
                        <li><a href="http://gamedev.stackexchange.com/" title="professional and independent game developers">Game Development</a></li>
                        <li><a href="http://tex.stackexchange.com/" title="users of TeX, LaTeX, ConTeXt, and related typesetting systems">TeX - LaTeX</a></li>
                            </ol></td><td><ol>
                        <li><a href="http://programmers.stackexchange.com/" title="professional programmers interested in conceptual questions about software development">Programmers</a></li>
                        <li><a href="http://unix.stackexchange.com/" title="users of Linux, FreeBSD and other Un*x-like operating systems.">Unix &amp; Linux</a></li>
                        <li><a href="http://apple.stackexchange.com/" title="power users of Apple hardware and software">Ask Different (Apple)</a></li>
                        <li><a href="http://wordpress.stackexchange.com/" title="WordPress developers and administrators">WordPress Answers</a></li>
                        <li><a href="http://gis.stackexchange.com/" title="cartographers, geographers and GIS professionals">Geographic Information Systems</a></li>
                        <li><a href="http://electronics.stackexchange.com/" title="electronics and electrical engineering professionals, students, and enthusiasts">Electrical Engineering</a></li>
                        <li><a href="http://android.stackexchange.com/" title="enthusiasts and power users of the Android operating system">Android Enthusiasts</a></li>
                        <li><a href="http://security.stackexchange.com/" title="Information security professionals">Information Security</a></li>
                            </ol></td><td><ol>
                        <li><a href="http://dba.stackexchange.com/" title="database professionals who wish to improve their database skills and learn from others in the community">Database Administrators</a></li>
                        <li><a href="http://drupal.stackexchange.com/" title="Drupal developers and administrators">Drupal Answers</a></li>
                        <li><a href="http://sharepoint.stackexchange.com/" title="SharePoint enthusiasts">SharePoint</a></li>
                        <li><a href="http://ux.stackexchange.com/" title="user experience researchers and experts">User Experience</a></li>
                        <li><a href="http://mathematica.stackexchange.com/" title="users of Mathematica">Mathematica</a></li>
                    
                        <li>
                            <a href="http://stackexchange.com/sites#technology" class="more">
                                more (14)
                            </a>
                        </li>
                </ol>
            </td>
            <td>
                <ol>
                        <li><a href="http://photo.stackexchange.com/" title="professional, enthusiast and amateur photographers">Photography</a></li>
                        <li><a href="http://scifi.stackexchange.com/" title="science fiction and fantasy enthusiasts">Science Fiction &amp; Fantasy</a></li>
                        <li><a href="http://cooking.stackexchange.com/" title="professional and amateur chefs">Seasoned Advice (cooking)</a></li>
                        <li><a href="http://diy.stackexchange.com/" title="contractors and serious DIYers">Home Improvement</a></li>
                    
                        <li>
                            <a href="http://stackexchange.com/sites#lifearts" class="more">
                                more (13)
                            </a>
                        </li>
                </ol>
            </td>
            <td>
                <ol>
                        <li><a href="http://english.stackexchange.com/" title="linguists, etymologists, and serious English language enthusiasts">English Language &amp; Usage</a></li>
                        <li><a href="http://skeptics.stackexchange.com/" title="scientific skepticism">Skeptics</a></li>
                        <li><a href="http://judaism.stackexchange.com/" title="those who base their lives on Jewish law and tradition and anyone interested in learning more">Mi Yodeya (Judaism)</a></li>
                        <li><a href="http://travel.stackexchange.com/" title="road warriors and seasoned travelers">Travel</a></li>
                        <li><a href="http://christianity.stackexchange.com/" title="committed Christians, experts in Christianity and those interested in learning more">Christianity</a></li>
                        <li><a href="http://gaming.stackexchange.com/" title="passionate videogamers on all platforms">Arqade (gaming)</a></li>
                        <li><a href="http://bicycles.stackexchange.com/" title="people who build and repair bicycles, people who train cycling, or commute on bicycles">Bicycles</a></li>
                        <li><a href="http://rpg.stackexchange.com/" title="gamemasters and players of tabletop, paper-and-pencil role-playing games">Role-playing Games</a></li>
                    
                        <li>
                            <a href="http://stackexchange.com/sites#culturerecreation" class="more">
                                more (21)
                            </a>
                        </li>
                </ol>
            </td>
            <td>
                <ol>
                        <li><a href="http://math.stackexchange.com/" title="people studying math at any level and professionals in related fields">Mathematics</a></li>
                        <li><a href="http://stats.stackexchange.com/" title="statisticians, data analysts, data miners and data visualization experts">Cross Validated (stats)</a></li>
                        <li><a href="http://cstheory.stackexchange.com/" title="theoretical computer scientists and researchers in related fields">Theoretical Computer Science</a></li>
                        <li><a href="http://physics.stackexchange.com/" title="active researchers, academics and students of physics">Physics</a></li>
                        <li><a href="http://mathoverflow.net/" title="professional mathematicians">MathOverflow</a></li>
                    
                        <li>
                            <a href="http://stackexchange.com/sites#science" class="more">
                                more (7)
                            </a>
                        </li>
                </ol>
            </td>
            <td>
                <ol>
                        <li><a href="http://stackapps.com/" title="apps, scripts, and development with the Stack Exchange API">Stack Apps</a></li>
                        <li><a href="http://meta.stackoverflow.com/" title="meta-discussion of the Stack Exchange family of Q&amp;A websites">Meta Stack Overflow</a></li>
                        <li><a href="http://area51.stackexchange.com/" title="proposing new sites in the Stack Exchange network">Area 51</a></li>
                        <li><a href="http://careers.stackoverflow.com/">Stack Overflow Careers</a></li>
                    
                </ol>
            </td>
    </tr>
</tbody></table>
                </div>
            </div>

            <div id="copyright">
                site design / logo © 2013 stack exchange inc; user contributions licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">cc-wiki</a> 
 with <a href="http://blog.stackoverflow.com/2009/06/attribution-required/" rel="license">attribution required</a>
            </div>
            <div id="footer-flair">
                <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="cc-wiki-link"></a>
            </div>
            <div id="svnrev">
                rev 2013.12.6.1206
            </div>
            
        </div>
    <iframe id="global-auth-frame" style="display:none" src="./html - Center image using text-align center  - Stack Overflow_files/read.htm"></iframe></div>
    <noscript>
        &lt;div id="noscript-warning"&gt;Stack Overflow works best with JavaScript enabled&lt;img src="http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"&gt;&lt;/div&gt;
    </noscript>
<script type="text/javascript">var p = "http", d = "static"; if (document.location.protocol == "https:") { p += "s"; d = "engine"; } var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = p + "://" + d + ".adzerk.net/ados.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
<script type="text/javascript">
    var ados = ados || {};
    ados.run = ados.run || [];
    ados.run.push(function () { ados_setKeywords('html,css');; ados_load(); });         
</script>

    <script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-5620270-1']);
        _gaq.push(['_setCustomVar', 1, 'tags', '|html|css|']); 
_gaq.push(['_trackPageview']);
    var _qevents = _qevents || [];
    var _comscore = _comscore || [];
    (function () {
        var ssl='https:'==document.location.protocol,
            s=document.getElementsByTagName('script')[0],
            ga=document.createElement('script');
        ga.type='text/javascript';
        ga.async=true;
        ga.src=(ssl?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(ga,s);
        var sc=document.createElement('script');
        sc.type='text/javascript';
        sc.async=true;
        sc.src=(ssl?'https://secure':'http://edge')+'.quantserve.com/quant.js';
        s.parentNode.insertBefore(sc, s);
        
        var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
        s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
        el.parentNode.insertBefore(s, el);
        
    })();
    _comscore.push({ c1: "2", c2: "17440561" });
    _qevents.push({ qacct: "p-c1rF4kxgLUzNc" });
    </script>            

<div id="window-resizer-tooltip" style="display: block;"><a href="http://stackoverflow.com/questions/7055393/center-image-using-text-align-center#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1380</span> x <span class="tooltipHeight" id="winHeight">1040</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1364</span> x <span class="tooltipHeight" id="vpHeight">883</span></div></body></html>